import React from 'react';
import { motion } from 'framer-motion';
import { useAppStore } from '@/stores/appStore';
import { 
  Play, 
  Pause, 
  SkipBack, 
  SkipForward, 
  RotateCcw,
  Bookmark,
  Volume2,
  VolumeX
} from 'lucide-react';

export function TimelineController() {
  const { 
    animation, 
    audioSettings,
    play, 
    pause, 
    reset, 
    jumpToStage, 
    setSpeed,
    updateAudioSettings,
    addBookmark
  } = useAppStore();
  
  const speedOptions = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];
  
  
  const handleTimelineClick = (event: React.MouseEvent<HTMLDivElement>) => {
    const rect = event.currentTarget.getBoundingClientRect();
    const clickX = event.clientX - rect.left;
    const percentage = clickX / rect.width;
    const targetStage = Math.floor(percentage * 7);
    jumpToStage(Math.max(0, Math.min(6, targetStage)));
  };
  
  return (
    <motion.div
      initial={{ y: 100, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.6, ease: "easeOut" }}
      className="control-panel"
    >
      <div className="h-full flex items-center justify-between px-6">
        {/* Left controls */}
        <div className="flex items-center space-x-4">
          {/* Play/Pause */}
          <motion.button
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            onClick={animation.isPlaying ? pause : play}
            className="bg-quantum-blue hover:bg-blue-600 text-white p-3 rounded-full transition-colors shadow-lg"
          >
            {animation.isPlaying ? <Pause size={24} /> : <Play size={24} />}
          </motion.button>
          
          {/* Previous stage */}
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => jumpToStage(Math.max(0, animation.currentStage - 1))}
            disabled={animation.currentStage === 0}
            className="bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed text-white p-2 rounded-lg transition-colors"
          >
            <SkipBack size={20} />
          </motion.button>
          
          {/* Next stage */}
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => jumpToStage(Math.min(6, animation.currentStage + 1))}
            disabled={animation.currentStage === 6}
            className="bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed text-white p-2 rounded-lg transition-colors"
          >
            <SkipForward size={20} />
          </motion.button>
          
          {/* Reset */}
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={reset}
            className="bg-slate-700 hover:bg-slate-600 text-white p-2 rounded-lg transition-colors"
            title="重置演示"
          >
            <RotateCcw size={20} />
          </motion.button>
        </div>
        
        {/* Center timeline */}
        <div className="flex-1 mx-8">
          <div className="flex items-center space-x-4 py-2">
            {/* Stage display */}
            <div className="text-white text-sm font-mono min-w-[80px]">
              {animation.currentStage + 1} / 7
            </div>
            
            {/* Timeline */}
            <div className="flex-1 relative">
              <div
                className="h-4 bg-slate-700 rounded-full cursor-pointer relative overflow-hidden border border-slate-600"
                onClick={handleTimelineClick}
              >
                {/* Progress */}
                <motion.div
                  className="h-full bg-gradient-to-r from-quantum-blue via-crypto-green to-proof-purple rounded-full"
                  style={{ width: `${((animation.currentStage + 1) / 7) * 100}%` }}
                  transition={{ duration: 0.3 }}
                />
                
                {/* Stage markers */}
                {Array.from({ length: 7 }, (_, i) => (
                  <div
                    key={i}
                    className={`absolute top-1/2 transform -translate-y-1/2 w-4 h-4 rounded-full border-2 border-white cursor-pointer z-10 transition-all duration-300 ${
                      i <= animation.currentStage ? 'bg-white shadow-lg scale-110' : 'bg-slate-600 hover:bg-slate-500'
                    }`}
                    style={{ left: `${(i / 6) * 100}%` }}
                    onClick={(e) => {
                      e.stopPropagation();
                      jumpToStage(i);
                    }}
                    title={`阶段 ${i + 1}`}
                  />
                ))}
              </div>
              
              {/* Stage labels */}
              <div className="absolute -top-6 left-0 right-0 flex justify-between text-xs text-gray-400">
                {['引入', '输入', '证明', '编码', '调用', '验证', '结果'].map((label, i) => (
                  <span
                    key={i}
                    className={`transition-colors ${
                      i === animation.currentStage ? 'text-white font-semibold' : 
                      i < animation.currentStage ? 'text-crypto-green' : 'text-gray-500'
                    }`}
                  >
                    {label}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
        
        {/* Right controls */}
        <div className="flex items-center space-x-4">
          {/* Speed control */}
          <div className="flex items-center space-x-2">
            <span className="text-gray-300 text-sm">速度:</span>
            <select
              value={animation.playbackSpeed}
              onChange={(e) => setSpeed(parseFloat(e.target.value))}
              className="bg-slate-700 text-white rounded px-2 py-1 text-sm border border-slate-600 focus:border-quantum-blue focus:outline-none"
            >
              {speedOptions.map((speed) => (
                <option key={speed} value={speed}>
                  {speed}x
                </option>
              ))}
            </select>
          </div>
          
          {/* Audio control */}
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => updateAudioSettings({ enabled: !audioSettings.enabled })}
            className={`p-2 rounded-lg transition-colors ${
              audioSettings.enabled 
                ? 'bg-crypto-green text-white' 
                : 'bg-slate-700 hover:bg-slate-600 text-gray-400'
            }`}
            title={audioSettings.enabled ? '静音' : '开启音频'}
          >
            {audioSettings.enabled ? <Volume2 size={20} /> : <VolumeX size={20} />}
          </motion.button>
          
          {/* Bookmark */}
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => addBookmark(animation.currentTime)}
            className="bg-slate-700 hover:bg-slate-600 text-white p-2 rounded-lg transition-colors"
            title="添加书签"
          >
            <Bookmark size={20} />
          </motion.button>
        </div>
      </div>
    </motion.div>
  );
}